// web/src/app/(employee)/_components/hot-city.tsx
import React from 'react';
import {db} from "@/lib/db";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {faker} from "@faker-js/faker/locale/zh_CN";
import Link from "next/link";

const HotCity = async () => {
    // 获取随机几个城市
    const cities = await db.city.findMany({take: 12})

    return (
        <>
            <h1 className={`text-3xl text-center font-semibold m-4`}>热门城市</h1>
            <div className={`mb-12 flex flex-row flex-wrap w-full gap-2 justify-center items-center`}>
                {cities && cities.map(c => (
                    <Link href={`/search?value=${c.name}`}
                          className={`hover:shadow-lg hover:scale-105 transition-all duration-200
                          rounded-md relative h-24 w-[14%]`}>
                        <span className={`text-clip text-lg text-white font-semibold absolute inset-x-8 inset-y-4`}>
                            {c.name}</span>
                        <img className={`rounded-md w-full h-24`}
                             src={faker.image.url()} alt={c.name}/>
                    </Link>
                ))}
            </div>
        </>
    );
};

export default HotCity;